<template>
  <el-config-provider :size="size" :z-index="zIndex">
    <div class="common-layout">
      <el-container>
        <el-aside width="auto" class="aside">
          <!-- 侧边菜单 -->
          <Menut :meuList="list" :boole="bool"></Menut>
        </el-aside>
        <el-container>
          <!-- 工具栏 -->
          <el-header height="auto" class="header">
            <div class="content">
              <div class="iconBox">
                <el-icon :size="30" color="#717479" class="icon" @click="bool=!bool" style=" transition: all 0.4s;">
                  <component :is='Fold' :style="'transform:rotate('+(bool?-180:0)+'deg);transition:all 0.5s;'"></component>
                </el-icon>
              </div>
              <!-- 面包屑 -->
              <Crumbs></Crumbs>
              <div class="toolBox">
                <!-- 控制全屏 -->
                <full-screen></full-screen><span>|</span>
                <!-- 组件大小 -->
                <module-size @changSize='changSize'></module-size><span>|</span>
                <!-- 换肤器 -->
                <them-picker></them-picker><span>|</span>
                <!-- 国际化 -->
                <language-cut></language-cut><span>|</span>
                <!-- 用户信息 -->
                <user-data></user-data>
              </div>
            </div>
            <!-- 标签 -->
            <bar-nav></bar-nav>
          </el-header>
          <el-main class="main">
             <router-view />
          </el-main>
        </el-container>
      </el-container>
    </div>
  </el-config-provider>
</template>
<script>
import { Fold, UserFilled, Lock, Right } from '@element-plus/icons-vue';
// import Main from "@/views/Main.vue";
import page from "@/router/page";
import Menut from "@/components/Navigation/Menut.vue";
import ThemPicker from "@/components/Navigation/ThemPicker.vue";
import Crumbs from "@/components/Navigation/Crumbs.vue";
import BarNav from "@/components/Navigation/BarNav.vue";
import FullScreen from "@/components/Navigation/FullScreen.vue";
import ModuleSize from "@/components/Navigation/ModuleSize.vue";
import LanguageCut from "@/components/Navigation/LanguageCut.vue";
import UserData from "@/components/Navigation/Admin/UserData.vue";
export default {
  setup() {
    return {
      Fold,
      UserFilled,
      Lock,
      Right
    }
  },
  data() {
    return {
      list: [],  //菜单栏数据
      bool: false, //菜单栏收缩
      zIndex: 3000,
      size: 'default'
    }
  },
  created() {
    this.list = page  //获取路由数据
  },
  components: {
    Menut,
    Crumbs,
    BarNav,
    ThemPicker,
    FullScreen,
    ModuleSize,
    LanguageCut,
    UserData
  },
  methods: {
    // 改变组件大小
    changSize(ind) {
      if (ind == 0) {
        this.size = "large"
      } else if (ind == 1) {
        this.size = "default"
      } else {
        this.size = "small"
      }
    },
  }
}
</script>
<style lang="less" scoped>
.aside {
  background-color: #545c64;
  height: 100vh;
  transition: all 0.4s;
}
.el-menu {
  border-right: 0px;
}
.header {
  padding: 0px;
  margin-bottom: 5px;
}
.iconBox {
  width: 50px;
  margin-top: 10px;
}
.icon {
  margin-left: 20px;
  vertical-align: middle;
}
.user {
  display: inline-block;
  width: 100px;
}
.toolBox {
  width: 60%;
  text-align: right;
  margin-top: 10px;
}
.toolBox span {
  color: #ccc;
  font-size: 10px;
  margin: 0px 10px;
}
.content {
  display: flex;
  height: 50%;
}
.el-main {
  height: 80vh;
  padding-left: 16px;
  background-color: #f4f4f4;
}

/*定义滚动条高宽 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 5px;
  height: 1px;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px white;
  border-radius: 10px;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 100px;
  -webkit-box-shadow: inset 0 0 6px rgba(104, 104, 100, 0.9);
  background-color: rgba(255, 255, 255, 0.5);
}
</style>
